import React, { useEffect, useState } from 'react';
import { Rnd } from 'react-rnd';
import './style.less'
import { Button, Input } from 'antd';
import { HolderOutlined, SaveOutlined, SettingOutlined } from '@ant-design/icons';

const FlowHeader = (props) => {
    const [position, setPosition] = useState({ x: 0, y: 20, width: 450, height: 50 });
    const [loading,setLoding] = useState(false)
    const [graphName,setGraphName] = useState('未命名')

    useEffect(() => {
        const handleResize = () => {
            const windowWidth = window.innerWidth;
            const headerWidth = position.width;
            const x = windowWidth - headerWidth - 80;
            setPosition((prev) => ({ ...prev, x }));
        };

        // 初始化位置
        handleResize();

        // 监听窗口大小变化
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    const onDrag = (e, d) => {
        setPosition((prev) => ({
            ...prev,
            x: prev.x + d.deltaX,
            y: prev.y + d.deltaY,
        }));
    }
    const handleSave = () => {
        setLoding(true)
        // Mock.saveDAG({
        //     nodes,edges
        // }).then(()=>{
        //     message.success('保存成功')
        // }).finally(()=>{
        //     setLoding(false)
        // })
    }
    const handlePlaceholder =() => {

    }

    return (
        <Rnd
            className="property"
            position={{
                x: position.x,
                y: position.y,
            }}
            size={{
                width: position.width,
                height: position.height
            }}
            disableDragging
            onDrag={onDrag}
            style={{
                zIndex: 201
            }}
        >
            <div className="flow-header">
                <div className='flex-row'>
                    <Input placeholder='请输入名称' value={graphName} onChange={e=>setGraphName(e.target.value)}/>
                    <Button type='default' icon={<HolderOutlined />} onClick={handlePlaceholder}>占位符管理</Button>
                    <Button type='primary' icon={<SaveOutlined />} onClick={handleSave} loading={loading}>保存</Button>
                    <Button type='text' icon={<SettingOutlined />} />
                </div>
            </div>
        </Rnd>
    );
};

export default FlowHeader;